
import { useState } from 'react'
import {Button  } from 'react-vant'
import { Modal,message } from 'antd';
import axios from '../../../axios/axios'
import { useNavigate } from 'react-router-dom';
axios.defaults.baseURL="http://127.0.0.1:3000"
let App=()=>{
    let nav =useNavigate()
    let [state,setState]=useState({
        name:'',
        num:60
    })
    let [newcode,setNewcode]=useState('')
    let [yzm,setYzm]=useState('')
    let [bool,setBool]=useState(false)
    let login =async()=>{
        console.log(state.name);
        let {data:{code,data}} = await axios.post('/xin/url',{phone:state.name})
        if(code==200){
            setNewcode(data)
            setBool(true)
            let newdsq=setInterval(()=>{
                if(state.num<=0){
                    setState({...state,num:60})
                    setBool(false)
                    clearInterval(newdsq)
                }else{
                    setState({...state,num:--state.num})
                }
            },1000)
        }else{
            message.error('请正确输入手机号,仔细检查手机号是否有错误')
        }
    }
    let yzmlogin=async()=>{
        console.log(newcode);
        let {data:{code,data}}=await axios.post('/xin/sjhlogin',{phoneNumber:state.name,code:yzm,generatedCode:newcode})
        if(code==200){
            localStorage.setItem('accessToken',data.accessToken)
            localStorage.setItem('refreshToken',data.refreshToken)
            nav('/chen/layout/home')
        }else{
            message.error('验证码填写错误请重新填写')
        }
    }
    return (
        <>
        <div>
            <div  style={{height:'4rem',display:'flex',alignItems:'center',margin:'1rem 3rem'}}>
                <p style={{width:'5rem',fontSize:'1rem'}}>手机号:</p>
                <input type="text" placeholder='输入您的账号' value={state.name} onChange={(e)=>{setState({...state,name:e.target.value})}} style={{background:'#efefef',border:'0',color:'rgb(0, 0, 0)',width:'25rem',height:'3rem',fontSize:'2rem',borderRadius:'0.5rem'}}/>
            </div>
            <div  style={{height:'4rem',display:'flex',alignItems:'center',margin:'1rem 3rem'}}>
                <p style={{width:'5rem',fontSize:'1rem'}}>验证码:</p>
                <input value={yzm} onChange={(e)=>{setYzm(e.target.value)}} style={{background:'#efefef',border:'0',color:'rgb(0, 0, 0)',width:'14rem',height:'3rem',fontSize:'2rem',borderRadius:'0.5rem'}}  placeholder='请输入验证码'  />
                <Button color='rgb(153,204,51)' style={{width:'9rem',height:'3rem'}} onClick={login} disabled={bool?true:false}>{bool?state.num:'验证码'}</Button>
            </div>
            <div style={{textAlign:'center',margin: '10rem 2rem'}}>
                <Button color='rgb(153,204,51)' style={{width:'30rem'}} onClick={yzmlogin}>登录</Button>
            </div>
        </div>
        </>
    )
}

export default App